<template>
  <!-- 轮播图 -->
  <div class="mod-order__orderInfo">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model.trim="state.dataForm.orderNo" placeholder="订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.courseName" placeholder="课程名称" clearable filterable @clear="clickClear">
          <el-option v-for="item in courseNameList" :key="item.id" :label="item.courseName" :value="item.courseName" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model.trim="state.dataForm.userName" placeholder="用户姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="订单创建时间" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="state.dataForm.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="订单更新时间" />
      </el-form-item>

      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="orderNo" label="订单编号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="userName" label="用户姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="optUser" label="经办人" header-align="center" align="center"></el-table-column>
      <el-table-column prop="payMoney" label="支付金额" header-align="center" align="center">
        <template v-slot="scope">
          <span>{{scope.row.payMoney? scope.row.payMoney / 100:0}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="支付状态" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == 1" type="success">已支付</el-tag>
          <el-tag v-else type="info">未支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="支付类型" header-align="center" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.type == 0">微信支付</span>
          <span v-if="scope.row.type == 1">支付宝支付</span>
        </template>
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import baseService from "@/service/baseService";
import { IObject } from "@/types/interface";

const view = reactive({
  getDataListURL: "/lingyao/orderinfo/page",
  getDataListIsPage: true,
  deleteURL: "/lingyao/orderinfo",
  deleteIsBatch: true,
  exportURL: "/lingyao/orderinfo/export",
  dataForm: {
    orderNo: "",
    courseName: "",
    userName: "",
    startTime: "",
    endTime: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

// 课程名称列表
const courseNameList = ref<IObject[]>([]);

// 获取课程名称列表
const getCourseNameList = () => {
  baseService
    .get(`/lingyao/courseinfo/page`, {
      page: 1,
      limit: 10000
    })
    .then((res) => {
      courseNameList.value = res.data.list;
    });
};

getCourseNameList();

const clickClear = () => {
  state.dataForm.courseName = "";
};
</script>
